<!DOCTYPE html>
<html>
  <head>
    <title>Our Web Catalogue</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="style.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <script type="text/javascript" src="jquery-1.5.2.js"></script>
    <script type="text/javascript" src="jquery.form.js"></script>
    <script type="text/javascript" src="cart.js"></script>
    <script type="text/javascript" src="crud.js"></script>
    <script type="text/javascript" src="index.js"></script>
    <script type="text/javascript" src="login.js"></script>
    <script type="text/javascript" src="url_helpers.js"></script>
    <script type="text/javascript">
        $(document).ready( function() {
            var books = getBookListing("#bookListing","controllers/books.php");
            var categories = getCategoryListing(
                "#categories","controllers/book_categories.php",books);

            books.afterRender = function() {
                loggedIn(function(data) {
                    $(".cartQuantity").text('0');
                    if (data.loggedInAs) {
                        $(".p_newreview").show();
                        $(".p_addtocart").show();
                        ShoppingCart.get( function(data) {
                            $.each(data,function(i,item) {
                                var span = $('#book'+item.book.id).find('.cartQuantity');
                                span.text(item.quantity);
                            });
                        });
                    } else {
                        $(".p_newreview").hide();
                        $(".p_addtocart").hide();
                    }
                },true);
            }

            function reload() {
                var params = getHashVars();
                
                categories.initRead();
                
                if (params.book) {
                    books.showBook(params.book);
                } else if (params.cat) {
                    books.showCat(params.cat);
                } else if (params.cart) {
                    renderCart("#bookListing");
                } else if (params.order) {
                    renderOrderForm("#bookListing");
                } else {
                    books.initRead();
                }
            }

            function on_relogin() {
                render_login(true);
                reload();
            };

            function render_login(reload) {
                loggedIn(function(data) {
                    if (data.loggedInAs) {
                        $("#p_loggedIn").text(data.loggedInAs.name);
                        $("#a_login").fadeOut();
                        $("#a_reg").fadeOut();
                        $("#a_logout").fadeIn();
                        $("#a_viewcart").fadeIn();
                    } else {
                        $("#p_loggedIn").text('');
                        $("#a_login").fadeIn();
                        $("#a_reg").fadeIn();
                        $("#a_logout").fadeOut();
                        $("#a_viewcart").fadeOut();
                    }
                },reload);
            }

            $("#a_login").click(function() {
                $("#regForm").fadeOut();
                $("#loginForm").toggle(1000);
                return false;
            });

            $("#a_reg").click(function() {
                $("#loginForm").fadeOut();
                $("#regForm").toggle(1000);
                return false;
            });

            $("#a_logout").click(function() {
                $("#loginForm").fadeOut();
                $("#regForm").fadeOut();
                $.post("controllers/login.php",{logout:1},function() {
                    on_relogin();
                });
                return false;
            });

            $("#a_viewcart").click(function() {
                renderCart("#bookListing",function(prev) { 
                    window.location.hash = prev;
                    reload(); 
                } );
                return false;
            });

            $("#loginForm").ajaxForm( 
                function() { on_relogin(); $("#loginForm").fadeOut(); } );

            $("#regForm").ajaxForm( { 
                dataType: 'json', 
                success: function(data) {
                    if (data && data.error) { alert(data.error); }
                    else { $("#regForm").fadeOut(); } 
                }
                });

            render_login();
            reload();
        });
    </script>

    <h1>Our Web Catalogue</h1>

    <div id="login">
        <p><span id="p_loggedIn"></span><a id="a_login" href="">login</a> <a id="a_reg" href="">register</a>
         <a style="display:none" id="a_logout" href="">logout</a>
         <a style="display:none" id="a_viewcart" href="">shopping cart</a>
        </p>
        <form id="loginForm" method="post" action="controllers/login.php">
            <table>
            <tr><td>name:</td><td><input type="text" name="login"></td></tr>
            <tr><td>password:</td><td><input type="password" name="pwd"></td></tr>
            <tr><td colspan="2"><input type="submit" value="login"></td></tr>
            </table>
        </form>
        <form id="regForm" method="post" action="controllers/users.php">
            <table>
            <tr><td>name:</td><td><input type="text" name="name"></td></tr>
            <tr><td>email:</td><td><input type="email" name="email"></td></tr>
            <tr><td>password:</td><td><input type="password" name="password"></td></tr>
            <tr><td colspan="2"><input type="submit" name="register" value="register"></td></tr>
            </table>
        </form>
    </div>
    
    <div id="categories">
    </div>

    <div id="bookListing">
    </div>

  </body>
</html>
